<template>
  <div class="box loginBox">
    <van-nav-bar
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="main">
      <h1>欢迎登录每日优鲜</h1>
      <van-tabs v-model="active" animated>
      <van-tab title="用户名登录" >
         <van-form  @submit="onSubmit1">
          <van-field
            v-model="username"
            name="username"
            clearable
            placeholder="用户名"
            :rules="[{ validator: unTest, message: '用户名有误', required: true }]"
          />
          <van-field
            v-model="password1"
            clearable
            name="password1"
            placeholder="密码"
            :rules="[{ validator: passTest1, message: '密码有误', required: true }]"
          />
          <div style="margin: 16px;">
            <van-button round block type="info" native-type="submit">提交</van-button>
          </div>
        </van-form>
      </van-tab>
      <van-tab title="手机号登录" >
         <van-form  @submit="onSubmit2">
          <van-field
            v-model="tel"
            name="tel"
            placeholder="手机号"
            clearable
            :rules="[{ validator: telTest, message: '手机号有误', required: true }]"
          />
          <van-field
            v-model="password2"
            name="password2"
            placeholder="密码"
            clearable
            :rules="[{ validator: passTest2, message: '密码有误', required: true }]"
          />
          <div style="margin: 16px;">
            <van-button round block type="info" native-type="submit">提交</van-button>
          </div>
        </van-form>
      </van-tab>
    </van-tabs>
    </div>
    <router-link to="/register"><p>还没有有账号？去注册</p></router-link>
  </div>
</template>

<script>
import Vue from 'vue'
import { login } from '@/api/request.js'
import { NavBar, Form, Field, Button, Toast, Tab, Tabs } from 'vant'

Vue.use(NavBar)
Vue.use(Form)
Vue.use(Field)
Vue.use(Button)
Vue.use(Toast)
Vue.use(Tab)
Vue.use(Tabs)

export default {
  data () {
    return {
      active: 0,
      username: '',
      password1: '',
      password2: '',
      tel: ''
    }
  },
  methods: {
    onClickLeft () {
      this.$router.back()
    },
    onClickRight () {
      this.$router.push('/register')
    },
    unTest () {
      return /^[a-zA-Z0-9_-]{1,16}$/.test(this.username)
    },
    passTest1 () {
      return /^[a-zA-Z0-9_-]{3,11}$/.test(this.password1)
    },
    passTest2 () {
      return /^[a-zA-Z0-9_-]{3,11}$/.test(this.password2)
    },
    telTest () {
      return /^1\d{10}$/.test(this.tel)
    },
    onSubmit1 (v) {
      const that = this
      login({
        username: v.username,
        password: v.password1
      }).then(data => {
        switch (data.data.code) {
          case 200:
            sessionStorage.setItem('token', data.data.token)
            sessionStorage.setItem('userId', data.data.msg)
            sessionStorage.setItem('isLogin', 'ok')
            Toast({
              message: '登录成功',
              onClose () {
                that.$router.push('/home')
              }
            })
            break
          case 201:
            Toast('该手机号不存在')
            break
          case 202:
            Toast('密码错误')
            break
        }
      })
    },
    onSubmit2 (v) {
      const that = this
      login({
        tel: v.tel,
        password: v.password2
      }).then(data => {
        switch (data.data.code) {
          case 200:
            sessionStorage.setItem('token', data.data.token)
            sessionStorage.setItem('userId', data.data.msg)
            sessionStorage.setItem('isLogin', 'ok')
            Toast({
              message: '登录成功',
              onClose () {
                that.$router.push('/home')
              }
            })
            break
          case 201:
            Toast('用户名不存在')
            break
          case 202:
            Toast('密码错误')
            break
        }
      })
    }
  }
}
</script>

<style lang="scss">
.loginBox {
  .van-nav-bar__content {
    height: 0.6rem;
    .van-nav-bar__left {
      padding-left: 0.21rem;
      .van-icon {
        color: #272727;
      }
      .van-nav-bar__arrow {
        font-size: 0.21rem;
      }
    }
  }
  .van-hairline--bottom::after {
    border-bottom-width: 0;
  }
  .main{
    padding: 0.38rem 0.35rem;
    h1 {
      font-size: 0.23rem;
      line-height: 0.23rem;
      color: #474246;
    }
    .van-tabs{
      margin-top: 0.3rem;
      .van-tab{
      font-size: 0.15rem;
    }
    }
    .van-form{
      margin-top: 0.2rem;
      .van-cell{
        line-height: 0.28rem;
        .van-field__control{
          color: #8b8788;
          font-size: 0.15rem;
        }
      }
      .van-button--primary{
        background: none;
        border: 1px solid #666;
        border-radius: 10px;
        span{
          font-size: 0.15rem;
          color: #bbbbbb;
        }
      }
      .van-button--info{
        background-color: #ffb1dd;
        border: none;
        .van-button__text{
          font-size: 0.17rem;
        }
      }
    }
  }
  p{
    font-size: 0.15rem;
    color: #ffb1dd;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0.3rem;
    text-align: center;
  }
}
</style>
